<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="/html/static/ajax/libs/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/html/static/ajax/libs/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/html/static/ajax/libs/css/style.css">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>信息框</h5>
                    </div>
                    <div class="ibox-content">
                        <p>通过调用<code>layer</code>实现</p>
                        <button id='btn1' type="button" class="btn btn-default">默认</button>
                        <button id='btn2' type="button" class="btn btn-info">信息</button>
                        <button type="button" class="btn btn-primary">主要</button>
                        <button type="button" class="btn btn-success">成功</button>
                        <button type="button" class="btn btn-danger">危险</button>
                        <button type="button" class="btn btn-warning">警告</button>
                        <button type="button" class="btn btn-link">链接</button>
                        <button type="button" class="btn btn-default disabled">默认</button>
                        <button type="button" class="btn btn-info disabled">信息</button>
                        <button type="button" class="btn btn-primary disabled">主要</button>
                        <button type="button" class="btn btn-success disabled">成功</button>
                        <button type="button" class="btn btn-danger disabled">危险</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <button type="button" class="btn btn-lg">大型按钮</button>
                <button type="button" class="btn btn-sm">小型按钮</button>
                <button type="button" class="btn btn-xs">迷你按钮</button>
                <button type="button" class="btn btn-default btn-sm">小型按钮</button>
                <button type="button" class="btn btn-default btn-xs">迷你按钮</button>
                <button type="button" class="btn btn-default disabled">禁用按钮</button>
            </div>
        </div>
    </div>
    <!-- HTML Content -->
    <!-- <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script> -->
    <script src="/html/static/ajax/libs/layui/layui.js"></script>
    <script src="/html/static/ajax/libs/jquery/jquery.js"></script>
    <script src="/html/static/ajax/libs/bootstrap/bootstrap.js"></script>
    <!-- <script src="/html/static/ajax/libs/layui/modules/layer.js"></script> -->
    <script>
        // var $ = layui.$
        var layer = layui.layer;
        // layer.msg('Hello World', { icon: 6 });
        $(function () {
            layui.use('layer', function () {
                $('#btn1').click(function () {
                    layer.msg($(this).text());
                });
            })

            // $('#btn2').click(function () {
            //     layer.msg($(this).text());
            // });

        });
        // layui.use(function () {
        //     layer.open({
        //         type: 1, // page 层类型
        //         area: ['500px', '300px'],
        //         title: 'Hello layer',
        //         shade: 0.6, // 遮罩透明度
        //         shadeClose: true, // 点击遮罩区域，关闭弹层
        //         maxmin: true, // 允许全屏最小化
        //         anim: 0, // 0-6 的动画形式，-1 不开启
        //         content: '<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
        //     });
        // })
        // Usage
        // layui.use(function () {
        //     var layer = layui.layer;
        //     // Welcome
        //     layer.msg('Hello World', { icon: 6 });
        // });
        // (fcuntion($) {
        //     $.extend({
        //         msg: function (msg, icon) {
        //             layer.msg(msg, { icon: icon })
        //         }
        //     })
        // }) (layer)

    </script>
</body>

</html>